<template>
  <h2>添加等级权益</h2>
  <table>
    <tr>
      <td>会员等级:</td>
      <td>
        <select v-model="addrankRight.rank_id">
          <option :value="0">请选择</option>
          <option v-for="item in RankInfo" :value="item.rank_Id">
            {{ item.rank_Name }}
          </option>
        </select>
      </td>
    </tr>
    <tr>
      <td>会员权益:</td>
      <td>
        <select v-model="addrankRight.rR_id">
          <option :value="0">请选择</option>
          <option v-for="item in RightInfo" :value="item.mR_Id">
            {{ item.mR_Name }}
          </option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <input type="button" value="添加" @click="AddRankRights" />
      </td>
    </tr>
  </table>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import axios from "axios";

//创建生命周期
onMounted(() => {
  LoadRank();
  LoadRight();
});

// 声明响应式数据
const RankInfo = ref([
  {
    rank_Id: 0,
    rank_Name: "",
  },
]);
// 加载等级信息
const LoadRank = () => {
  axios
    .get("https://localhost:7071/api/MemberRights/showMemberRankInfo")

    .then((res) => {
      RankInfo.value = res.data;
    });
};

// 会员权益
const RightInfo = ref([
  {
    mR_Id: 0,
    mR_Name: "",
  },
]);

// 加载会员权益
const LoadRight = () => {
  axios
    .get("https://localhost:7071/api/MemberRights/ShoowMemberRights")

    .then((res) => {
      RightInfo.value = res.data;
    });
};

const addrankRight = ref({
  rR_id: 0,
  rank_id: 0,
});

const AddRankRights = () => {
  axios
    .post(
      "https://localhost:7071/api/MemberRights/AddRankRightsInfo",
      addrankRight.value
    )
    .then((res) => {
      if (res.data > 0) {
        alert("添加成功");
      } else {
        alert("添加失败");
      }
    });
};
</script>

<style scoped>
</style>